<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12">
        纯手动：<br />
        <el-form label-position="right" label-width="100px" :model="pForm">
          <el-form-item label="外部商品Id">
            <el-input v-model="pForm.out_product_id" clearable></el-input>
          </el-form-item>
          <el-form-item label="外部skuId">
            <el-input v-model="pForm.out_sku_id" clearable></el-input>
          </el-form-item>
        </el-form>
        <el-form label-position="right" label-width="100px" :model="form">
          <el-form-item label="订单Id">
            <el-input v-model="form.orderId" clearable></el-input>
          </el-form-item>
          <el-form-item label="省">
            <el-input v-model="form.provinceName" clearable></el-input>
          </el-form-item>
          <el-form-item label="市">
            <el-input v-model="form.cityName" clearable></el-input>
          </el-form-item>
          <el-form-item label="区">
            <el-input v-model="form.townName" clearable></el-input>
          </el-form-item>
          <el-form-item label="详情">
            <el-input v-model="form.detail" clearable></el-input>
          </el-form-item>
          <el-form-item label="接收人">
            <el-input v-model="form.postReceiver" clearable></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="form.postTel" clearable></el-input>
          </el-form-item>
        </el-form>
        <el-button type="primary" @click="submitForm">立即创建</el-button>
      </el-col>
      <el-col :span="12">
        手动建立联系：<br />
        <el-row>
          <el-col :span="20">
            <el-input
              v-model="goodsUrl"
              clearable
              placeholder="商品链接"
            ></el-input>
          </el-col>
          <el-col :span="4"
            ><el-button @click="getGoodsData">获取商品信息</el-button></el-col
          >
        </el-row>
        <el-select
          v-model="specId"
          placeholder="请选择SKu"
          style="width: 100%"
          v-show="isShow"
        >
          <el-option v-for="item in 20" :key="item" :label="item" :value="item">
            <span style="float: left">{{ item }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{
              item
            }}</span>
          </el-option>
        </el-select>
        <el-button type="primary">建立绑定</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      specId: "",
      goodsUrl: "",
      isShow: false,
      goods: "",
      pForm: { out_product_id: "", out_sku_id: "" },
      form: {
        bType: "2",
        buyerWords: "",
        cBiz: "",
        cType: "8",
        cancelReason: "",
        child: "",
        childNum: "1",
        cosRatio: "",
        couponAmount: "",
        couponInfo: "",
        createTime: "",
        expShipTime: "",
        finalStatus: "",
        isComment: "",
        logisticsCode: "",
        logisticsId: "",
        logisticsTime: "",
        orderId: "",
        orderStatus: "2",
        orderTag: "",
        orderTotalAmount: "",
        orderType: "",
        payTime: "",
        payType: "",
        postAmount: "",
        postCode: "",
        postReceiver: "",
        postTel: "",
        receiptTime: "",
        sellerWords: "",
        shopCouponAmount: "",
        shopId: "",
        updateTime: "",
        urgeCnt: "",
        userName: "",
        comboAmount: "",
        comboNum: "",
        productId: "",
        comboId: "",
        totalAmount: "",
        provinceName: "",
        detail: "",
        cityName: "",
        townName: "",
        productName: "三尖木工扁钻木工钻头六角柄木工开孔器套装平钻头",
        productPic:
          "https://sf3-ttcdn-tos.yangyi08.com/obj/temai/FiebaBwz4Z2Eg-MEVUAKF43Q1YjLwww750-750",
      },
    };
  },
  methods: {
    async getGoodsData(url) {
      let Expression = /http(s)?:\/\/([\w-]+\.)+[\w-]+(\/[\w- .\/?%&=]*)?/;
      let goodsUrl = this.goodsUrl;
      var objExp = new RegExp(Expression);
      if (objExp.test(goodsUrl)) {
        await this.$http
          .get(`/goods/detail/${36243373956}`)
          .then(({ data }) => {
            this.goods = JSON.parse(data.message);
            this.isShow = true;
          })
          .catch((err) =>
            this.$message({ message: "获取失败", type: "warning" })
          );
        return true;
      } else {
        this.$message({ message: "不是合法网址", type: "warning" });
        return false;
      }
    },
    async submitForm() {
      if (this.pForm.out_product_id == null || this.pForm.out_product_id == "") {
        this.$message({ message: "【外部商品ID】不可以为空", type: "warning" });
        return false;
      }
      if (this.form.provinceName == "") {
        this.$message({ message: "省不可以为空", type: "warning" });
        return false;
      }
      if (this.form.cityName == "") {
        this.$message({ message: "【市】不可以为空", type: "warning" });
        return false;
      }
      if (this.form.townName == "") {
        this.$message({ message: "【区】不可以为空", type: "warning" });
        return false;
      }
      if (this.form.detail == "") {
        this.$message({ message: "【详情】不可以为空", type: "warning" });
        return false;
      }
      if (this.form.postReceiver == "") {
        this.$message({ message: "【接收人】不可以为空", type: "warning" });
        return false;
      }
      if (this.form.postTel == "") {
        this.$message({ message: "【电话】不可以为空", type: "warning" });
        return false;
      }
      this.form.child = `[{"post_amount":0,"receipt_time":"0","code":"","logistics_time":"1600510486","cos_ratio":"0.00","sub_b_type":3,"user_name":"","combo_amount":3990,"pid":"4708867539064511060A","urge_cnt":0,"shop_coupon_amount":0,"logistics_id":20,"order_status":2,"update_time":1600510486,"final_status":3,"product_id":"3370428252916163569","is_comment":"0","post_tel":"${this.form.postTel}","out_product_id":${this.pForm.out_product_id},"pay_type":2,"b_type":"2","order_type":0,"campaign_id":"0","post_receiver":"${this.form.postReceiver}","coupon_amount":0,"out_sku_id":"${this.pForm.out_sku_id}","create_time":"1600466009","spec_desc":[{"name":"配置","value":"（普钢材质）三尖木工扁钻10-25六件套"}],"product_pic":"https://sf3-ttcdn-tos.yangyi08.com/obj/temai/FiebaBwz4Z2Eg-MEVUAKF43Q1YjLwww750-750","post_addr":{"province":{"name":"${this.form.provinceName}","id":"330000"},"town":{"name":"${this.form.townName}","id":"330602"},"city":{"name":"${this.form.cityName}","id":"330600"},"detail":"${this.form.detail}"},"logistics_code":"557024600882564","buyer_words":"","product_name":"三尖木工扁钻木工钻头六角柄木工开孔器套装平钻头","combo_id":344106551,"coupon_info":[],"pay_time":"2020-09-19 05:53:39","coupon_meta_id":"0","shop_id":173078,"combo_num":1,"exp_ship_time":1603058009,"cancel_reason":"","campaign_info":[],"total_amount":3990,"seller_words":"","c_type":"0","post_code":"","order_id":"4708867539064511060"}]`;
      await this.$http
        .post(
          `/aliGoodsLib/add-tt-order/by-web`,
          this.form
        )
        .then((res) => {
          this.$message({ message: "创建成功", type: "success" });
        })
        .catch((err) => {
          this.$message({ message: "创建失败", type: "warning" });
        });
    },
  },
};
</script>
